<template>
	<view class='search'>
		<view class='search-c'>
			<image class='icon search-icon' src='/static/image/zoom.png'></image>
			<input class='search-input' placeholder-class='search-input-p' placeholder='搜索知识'
				@click="navSearch"></input>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';

	name: 'search-box'
	export default {
		components: {

		},
		data() {
			return {

			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'footPrint', 'applicationConfig']),
		},
		props: {

		},
		methods: {
			navSearch() {
				uni.navigateTo({
					url: '/pages/resource/search'
				})
			},
		},
	}
</script>

<style lang='scss'>
	.search {
		width: 100%;
		height: 104upx;
		padding: 16upx 0;
		/* background-color: rgba(255, 255, 255, 1); */
		z-index: 999;
		transition: all .5s;
		display: flex;

		.search-c {
			height: 100%;
			position: relative;
			width: 100%;

			.search-input {
				background-color: #fff;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				line-height: 52upx;
				border-radius: 50upx;
				font-size: 24upx;
				transition: all .5s;
				padding: 10upx 30upx 10upx 90upx;
			}

			.search-icon {
				position: absolute;
				top: 50%;
				left: 30upx;
				right: 30upx;
				transform: translateY(-50%);
				z-index: 99;
			}

			.icon {
				width: 50upx;
				height: 50upx;
			}
		}
	}
</style>